Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: Don't allow empty chat messages #1137

Merged
merged 6 commits into from
Aug 25, 2023
Merged

fix: Don't allow empty chat messages #1137

merged 6 commits into from
Aug 25, 2023

Conversation

kevinmitch14
Copy link
Contributor

This PR fixes an issue where users are able to send empty chat messages.

Old:
Screen Shot 2023-08-07 at 17 23 10

New:
Screen Shot 2023-08-07 at 17 26 14

@vercel
Copy link

vercel bot commented Aug 7, 2023

@kevinmitch14 is attempting to deploy a commit to the shadcn-pro Team on Vercel.

A member of the Team first needs to authorize it.

@shadcn shadcn added bug Something isn't working area: www labels Aug 9, 2023
@vercel
Copy link

vercel bot commented Aug 9, 2023

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
ui ✅ Ready (Inspect) Visit Preview 💬 Add feedback Aug 25, 2023 2:32am

@kevinmitch14
Copy link
Contributor Author

Added a further enhancement to disable autocomplete on the chat input. Spotted it on the preview deployment!

])

event.currentTarget.message.value = ""
if (messageLength > 0) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Instead of using a State to maintain and check for message length, try using "event.currentTarget.message.value" directly to check message length. something like this:-

const messageInput = event.currentTarget.message.value;

if(messageInput?.length > 0){
  // Add Message
}

/// or just return from function if message is empty
if(messageInput?.length < 1){
  return
}

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi @SRX9, I am using state to track the message length in order to disable/enable the send button on the form which is seen in most chat apps today.

Using event.currentTarget.message.value works also, it does mean that the messageInput type is any. And then you continue to use trim() and .length on something of type any which shows no problems on the surface. Changing the id of the input will also easily go unnoticed.

Both options work, but the state would still be there to disable/enable send button when input length is < 1.

Copy link
Contributor

@SRX9 SRX9 Aug 14, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok

@dan5py
Copy link
Contributor

dan5py commented Aug 13, 2023

Hi @kevinmitch14, thanks for the PR. Can you please simplify this by using a ref like this:

export function CardsChat() {
  const [open, setOpen] = React.useState(false)
  const [selectedUsers, setSelectedUsers] = React.useState<User[]>([])
  const inputRef = React.useRef<HTMLInputElement>(null)
        <CardFooter>
          <form
            onSubmit={(event) => {
              event.preventDefault()

              if (!event.currentTarget.message.value) return
            <Input
              ref={inputRef}
              id="message"
              placeholder="Type your message..."
              className="flex-1"
            />

@kevinmitch14
Copy link
Contributor Author

kevinmitch14 commented Aug 13, 2023

Hi @kevinmitch14, thanks for the PR. Can you please simplify this by using a ref like this:

Hi @dan5py, what do you mean? Not following you here. What do you want to use the ref for? Something like this in the onSubmit?

if (!inputRef?.current?.value.trim()) return

if (!event.currentTarget.message.value) return

Keep in mind that we need to use trim() in order to stop white-space messages from sending. Eg. " ". I am using the state in order to determine disabled property on the submit button. Using a ref would not trigger a re-render.

I don't think state is an issue here..if anything I would change the useState to track input value, and derive inputLength from that. Did some digging on Vercel's AI chatbot and looks like they are passing input value state down to determine disabled button property value.

References:

Copy link
Contributor

@dan5py dan5py left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@kevinmitch14 My bad! Didn't noticed you were trying to disable the send button on empty input, sorry.

With the last changes applied it looks good to me. Thanks!

@kevinmitch14
Copy link
Contributor Author

Good to merge this @shadcn?

Copy link
Collaborator

@shadcn shadcn left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Perfect. Thank you.

@shadcn shadcn merged commit 4b0fbe2 into shadcn-ui:main Aug 25, 2023
5 checks passed
lloydrichards pushed a commit to lloydrichards/shadcn-ui that referenced this pull request Oct 3, 2023
kjxbyz pushed a commit to muse-ui/muse-ui that referenced this pull request Jun 7, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area: www bug Something isn't working
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants